<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view slot="top">
				<view class="search-header">
					<view class="search-tip-box">
						<text>共 {{dataTotal}} 项</text>
					</view>
				</view>
			</view>
			<view class="building-list">
				<view class="building-item" v-for="(item, index) in dataList" :key="index">
					<view class="building-name">{{item.name}}</view>
					<view class="building-value">{{item.num}}</view>
					<view class="building-time">{{item.time_text}}</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		biaoLog,
	} from '@/api/landlord'
	export default {
		data() {
			return {
				room_id: null,
				biao_type: null,
				dataTotal: 0, // 数据总数
				dataList: [], // 数据列表
			}
		},
		onLoad(options) {
			if (options && options.room_id) {
				this.room_id = options.room_id
				this.biao_type = options.type
			}
		},
		methods: {
			refreshList() {
				if (this.$refs.paging) {
					this.$refs.paging.refresh();
				}
			},
			queryList(pageNo, pageSize) {
				biaoLog({
					type: this.biao_type, //类型：1-水表，2-电表，3-燃气
					room_id: this.room_id,
					page: pageNo,
					page_size: pageSize,
				}).then(res => {
					this.$refs.paging.complete(res.data.data.data);
					this.dataTotal = res.data.data.total;
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #F5F6F7;
	}

	.search-header {
		flex-shrink: 0;
		padding: 20rpx 30rpx;

		.search-tip-box {
			font-size: 22rpx;
			color: #999999;
			margin: 20rpx 0;
		}
	}

	.building-list {
		margin: 0 32rpx;

		.building-item {
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			padding: 34rpx 40rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			.building-name {
				flex: 1;
				font-size: 28rpx;
				color: #666666;
			}

			.building-value {
				font-size: 28rpx;
				color: #222222;
				flex: 1;
				text-align: center;
			}

			.building-time {
				font-size: 28rpx;
				color: #9A9A9A;
				flex: 2;
				text-align: right;
			}
		}
	}
</style>